<template>
	<view class="common">

		<uni-nav-bar :fixed="true" color="#fff" background-color="rgba(255,255,255,0)" :border="false" left-icon="left"
			status-bar title="车辆维修详情" @clickLeft="back" />
		<view class="main">
			<view class="info1">
				<view class="imge">
					<image src="@/pacakgeRepair/static/详情.png" mode=""></image>
				</view>
				<view class="info">
				<view class="title">
					大美报修厂（解放路）
				</view>
				<view class="star" style="display: flex;">
					<uni-rate :readonly="true" :value="2" size="18" />
					<text>1分</text>
					<text>销量:</text>
					<text>100</text>
				</view>
				<view class="time">
					<view class="">
						营业时间：周一到周五 早上8：00=晚上22：00
					</view>
				</view>
				<view class="address">
					位置：山阳区人民路与解放路交叉口
					<navigator class="go" url="/pacakgeRepair/pages/packageRepairNav/packageRepairNav">
						<image src="/pacakgeRepair/static/plane@3x.png" mode=""></image>
					</navigator>
							
				
				</view>	
				
				</view>



			</view>

	<view class="service">
					<view class="top">
						<view class="titleView">
							<!-- 遍历 titleList 渲染文本项 -->
							<view v-for="(item, index) in titleList" :key="index" :class="{ active: index === current }"
								@tap="chooseItem(index)">
								{{ item.title }}
							</view>
						</view>
					</view>
				<view class="show">
					<uni-list :border="false" class="serviceList">
										
											
											<uni-list-item direction="column" :border="false"  v-for="(item,index) in list" :key="index" >
											
											
												<!-- 自定义 body，实现左图右文布局 -->
												<template #body>
													<view class="list-item-container">
														<!-- 左图片 -->
														<image src="@/pacakgeRepair/static/luntai.png" mode=""
															></image>
														<!-- 右文字 -->
														<view class="right">
															
															<view class="title">
																到店补胎
																
															</view>
														
															<view class="price">
																￥<text>222</text>
																
															</view>
														
														</view>
														<view class="end">
																<view class="buy">
																	抢购
																</view>
																<view class="des">
																	年售3000
																</view>
																<view class="des">
																	26分钟前 有人购买
																</view>
														</view>
													</view>
												</template>
											
											</uni-list-item>
											
											
										</uni-list>
				</view>
						
					</view>
				
			
			
			
			<view class="evaluation">
				<view  class="title">服务评价</view>
				<view class="list">
					<view class="item">
						
							<view class="left">
								
								<image src="/static/uni.png" mode=""></image>
							</view>
							<view class="right">
								<view class="" style="display: flex; justify-content: space-between;">
										<view class="name">
											黄Xx
										</view>
										<view >
											2022-12-31
										</view>
									
								</view>
								<view class="start">
										<uni-rate :readonly="true" :value="2" size="18" />
								</view>
								<view class="content">
								洗的非常不错，洗的非常不错，洗的非常不错，洗的非常不错，
									
								</view>
							</view>
					</view>
					<view class="item">
						
							<view class="left">
								
								<image src="/static/uni.png" mode=""></image>
							</view>
							<view class="right">
								<view class="" style="display: flex; justify-content: space-between;">
										
										
											<view class="name">
												黄Xx
											</view>
											
										
										<view >
											2022-12-31
										</view>
									
								</view>
								<view class="start">
										<uni-rate :readonly="true" :value="2" size="18" />
								</view>
								<view class="content">
								洗的非常不错，洗的非常不错，洗的非常不错，洗的非常不错，
									
								</view>
							</view>
					</view>
				</view>
			</view>


		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
			current: 0,
            titleList: [
                {
                    title: "全部"
                },
                {
                    title: "已下单"
                },
                {
                    title: "服务中"
                },
                {
                    title: "已完成"
                }
            ],
			list: [{
			
								id: "7164518674190827568",
								type: "待服务",
								url: "@/packageOrder/static/img.png",
								title: "全屋深度保洁四居室(160平以下)",
								num: "xxx",
								price: 112,
								Option: "确认服务"
			
							},
							{
							
												id: "7164518674190827568",
												type: "待服务",
												url: "@/packageOrder/static/img.png",
												title: "全屋深度保洁四居室(160平以下)",
												num: "xxx",
												price: 112,
												Option: "确认服务"
							
											}]
			}
		},
		methods: {
back() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			chooseItem(index) {
			    this.current = index;
				
				
			}
		}
	}
</script>

<style scoped>
	.main>* {
		background-color: #fff;
		padding: 30rpx;

	}
	.common > .main > .info1{
		padding: 20rpx 20rpx;
	}
	.imge{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.imge>image{
		width: 100%;
		height: 400rpx;
	}
	
	/*维修场  */
	.info>*{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		column-gap: 10rpx;
		padding: 5rpx 5rpx;
	}
	.info{
		color: #898989;
	}
	.title{
		color: #000;
		font-weight: bold;
		line-height: 50rpx;
		height: 50rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}
	.go{
		display: flex;
		justify-content: center;
		align-items: center;
		}
	.go >image{
		width: 30rpx;
		height: 30rpx;
		
	}


	
	.item{
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		column-gap: 10rpx;
		border-bottom: 3rpx solid  #eee;
		
	}
	.list>.item:nth-last-child(1){
		border-bottom: none;
	}
	.item>.left>image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50rpx;
	}
	.item{
		color: #898989;
	}
	.item .name
	{
		color: #000;
		font-size: 30rpx;
		font-weight: 400rpx;
	}
	
	
	
	.titleView {
	  
	    display: flex;
	    flex-wrap: nowrap; 
	    white-space: nowrap; 
		justify-content: space-around;
	    padding: 0px 50rpx; 
		column-gap: 50px;
		background-color: #fff;
	
	}
	.titleView>view{
		padding: 20rpx 0rpx;
		color: #b5b5b5;
		font-size: 30rpx;
		
		}
	/* 让最后一个 text 右对齐 */

	
	.titleView>.active {
	    color: #0d80fb; 
		border-bottom: 10rpx solid  #0d80fb ;
	}
	
	
	/* 列表区 */
	.show{
		background-color: transparent;
		padding: 20rpx;
	}
		::v-deep   .uni-list{
		background-color: transparent;
		row-gap: 20rpx;
	}
		::v-deep .uni-list-item {
			border-radius: 30rpx;
			
		}
		::v-deep .uni-list-item {
			border-bottom: none; /* 去除底部边框 */
		}
		
		
	
		.list-item-container {
			padding-left: 0rpx;
			display: flex;
			column-gap: 20rpx;
			justify-content: flex-start;
			align-items: center;
			
		}
		.list-item-container>image{
			width: 140rpx;
			height: 140rpx;
		}
		::v-deep .uni-list-item__container{
			padding: 10rpx;
		}
		.list-item-container>.right{
			height: 140rpx;
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			flex: 1;
			
		}
		.list-item-container>.end{
				width: 220rpx;
				height: 140rpx;
		}
		
		.list-item-container>.right>.title{
			font-weight: bold;
				padding: 0rpx;
			padding-top: orpx;	
			
		}
		.list-item-container>.right>.num{
			color: #b5b5b5;
			
		}
		
		.list-item-container>.right>.price{
			color: #ff0000;
			font-weight:900;
			line-height: 54rpx;
			padding-bottom: 0rpx;
		}
		.end{
				display: flex;
				flex-direction: column;
				align-items: flex-end;
		}
		.end>.buy{
			padding: 5rpx 20rpx;
			background-color: #fd510e;
			border-radius: 30rpx;
			color: #fff;
		}
		
		.end>.des{
			text-align: end;
			font-size: 25rpx;
			color: #898989;
			
		}
	
</style>